<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
import { onMounted, ref, Ref, watch } from 'vue';
import { useECharts } from '@/hooks/web/use-echarts';
import { useDataSource } from '@/hooks/web/use-echarts/useDataSource';
import { basicProps } from './props';

const props = defineProps({
  ...basicProps,
});

const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
let { queryData } = useDataSource(props, initOptions);

/**
 * 初始化
 */
function initOptions(chartData) {
  let option: any = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          width: 1,
          color: '#019680',
        },
      },
    },
    // 右上角工具栏
    toolbox: {
      show: true, //是否显示工具栏组件
      orient: 'horizontal', //工具栏icon的布局朝向
      itemSize: 18, //工具栏icon的大小
      itemGap: 20, //item之间的间距
      right: 20, //toolbox的定位位置
      feature: {
        saveAsImage: { show: true }, //导出图片
        magicType: {
          //动态类型切换
          type: ['line', 'bar', 'pie'],
        },
        restore: { show: false }, //重置
      },
      iconStyle: {
        //color:'#04a0bb'
      },
    },
    grid: {
      left: '1%',
      right: '1%',
      top: '10%',
      bottom: 0,
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: chartData.xData,
      splitNumber: 2,
    },
    yAxis: {
      type: 'value',
      splitNumber: 4,
    },
    series: [
      {
        data: chartData.yData,
        type: 'bar',
        barMaxWidth: 80,
      },
    ],
  };
  setOptions(option);
}

function initData(params) {
  queryData({
    url: '/analysis/visitAnalysisBar',
    params,
  });
}

watch(props, (nweProps, oldProps) => {
  initData({
    dateRuleCode: props.dateRuleCode,
    dataType: props.dataType,
    year: props.dateTypeValue,
    airportId: props.airportId,
  });
});

onMounted(() => {
  initData({
    dateRuleCode: props.dateRuleCode,
    dataType: props.dataType,
    airportId: props.airportId,
    year: props.dateTypeValue,
  });
});
</script>
